<template>
    <div>
        <div class="topmsg">
            <div class="img">
                <img crossorigin="anonymous" :src="myimg" alt="" />
            </div>
            <div>
                <div class="msgtop">Hi，{{ myname }}欢迎登入</div>
                <div class="msgdetail">
                    <div>手机号码：{{ myphone }}</div>
                    <div class="line"></div>
                    <div>{{ myrolename }}</div>
                </div>
            </div>
        </div>
        <div class="paddingbox">
            <div class="box">
                <div class="boxl">
                    <div class="sssj">
                        <div class="top">
                            <div class="top_l">
                                <span class="bord">实时数据</span>
                                <span class="gray">统计截止 {{ date }} 24:00</span>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div class="mg-b-20 dclbox">
                        <div class="title">待处理</div>
                        <div class="infobox">
                            <div class="item" @click="topqdwsp">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.serveCompanyAudit" />
                                    <img src="../customerServiceHomePage/img/more.png" alt="" />
                                </div>
                                <div class="bottom">派遣单位审批</div>
                            </div>
                            <div class="item" @click="toczsp">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.rechargeAudit" />
                                    <img src="../customerServiceHomePage/img/more.png" alt="" />
                                </div>
                                <div class="bottom">充值审批</div>
                            </div>
                            <div class="item" @click="tobacl">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.reportAudit" />
                                    <img src="../customerServiceHomePage/img/more.png" alt="" />
                                </div>
                                <div class="bottom">报案处理</div>
                            </div>
                            <div class="item" @click="toyebztx">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.balanceLack" />
                                    <img src="../customerServiceHomePage/img/more.png" alt="" />
                                </div>
                                <div class="bottom">余额不足提醒</div>
                            </div>
                            <div class="item" @click="tolzcykhfp">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.waitAllocated" />
                                    <img src="../customerServiceHomePage/img/more.png" alt="" />
                                </div>
                                <div class="bottom">待分配客户</div>
                            </div>
                        </div>
                    </div>
                    <div class="utilbox">
                        <div class="title">快捷工具</div>
                        <div class="bgbox">
                            <div class="utilinfobox gap-8px mg-b-25">
                                <div class="itembox pointer" @click="yjxb">
                                    <img class="iconimg" src="./img/yjxb.png" alt="" />
                                    <div class="text">一键续保</div>
                                </div>
                                <div class="itembox pointer" @click="showlxsbcx = true">
                                    <img class="iconimg" src="./img/lxsbcx.png" alt="" />
                                    <div class="text">薪资状态查询</div>
                                </div>
                                <div class="itembox pointer" @click="totbrycx">
                                    <img class="iconimg" src="./img/tbrycx.png" alt="" />
                                    <div class="text">投保人员查询</div>
                                </div>
                                <div class="itembox pointer" @click="toygzx">
                                    <img class="iconimg" src="./img/ygzx.png" alt="" />
                                    <div class="text">账号管理</div>
                                </div>
                                <div class="itembox pointer" @click="cxbd">
                                    <img class="iconimg" src="./img/cxbd.png" alt="" />
                                    <div class="text">撤销保单</div>
                                </div>
                                <div class="itembox pointer" @click="tobmd">
                                    <img class="iconimg" src="./img/bmd.png" alt="" />
                                    <div class="text">白名单</div>
                                </div>
                            </div>
                            <div class="utilinfobox gap-8px mg-b-25">
                                <div class="itembox pointer" @click="tohmd">
                                    <img class="iconimg" src="./img/hmd.png" alt="" />
                                    <div class="text">黑名单</div>
                                </div>
                                <div class="itembox pointer" @click="tobsqy">
                                    <img class="iconimg" src="./img/bsqy.png" alt="" />
                                    <div class="text">保司迁移</div>
                                </div>
                                <div class="itembox pointer" @click="showResetCaptcha = true">
                                    <img class="iconimg" src="./img/czyzm.png" alt="" />
                                    <div class="text">重置验证码</div>
                                </div>
                                <div class="itemboxc"></div>
                                <div class="itemboxc"></div>
                                <div class="itemboxc"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boxr">
                    <div class="messagebox">
                        <div class="tcbox">
                            <div class="mg-b-40 fs-16 bold" style="
                                    position: absolute;
                                    background-color: #ffffff;
                                    width: 92%;
                                    z-index: 9;
                                    height: 50px;
                                    margin-top: -100px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                ">
                                <span>消息</span>
                                <div class="messageselect">
                                    <el-select v-model="selectmessagetype" class="m-2" placeholder="Select"
                                        @change="getmessagelist" size="small" style="width: 150px">
                                        <el-option v-for="item in messagetypeoptions" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 0 && ele.status === 1
                                " v-for="(ele, i) in messagelist" :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">成单通知</div>
                                <div class="msginfo">
                                    <div class="cdmsg">
                                        你跟进的客户
                                        <span class="bord">{{
                                            ele.companyName
                                            }}</span>
                                        开通了
                                        <span v-show="ele.amtProduct === 0" class="bord">「子弹发薪」</span>
                                        <span v-show="ele.amtProduct === 1" class="bord">「电子签」</span>
                                        <span v-show="ele.amtProduct === 2" class="bord">「日日保」</span>
                                        <span v-show="ele.amtProduct === 3" class="bord">「长期保」</span>
                                        <span v-show="ele.amtProduct === 4" class="bord">「微聘」</span>
                                        <span v-show="ele.amtProduct === 5" class="bord">「微保」</span>
                                        <span v-show="ele.amtProduct === 6" class="bord">「团意日保」</span>
                                        <span v-show="ele.amtProduct === 7" class="bord">「短信群发」</span>
                                        服务；
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作人：</div>
                                        <div class="lablecontent">
                                            {{
                                                ele.createUserName
                                                    ? ele.createUserName
                                                    : '--'
                                            }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作时间：</div>
                                        <div class="lablecontent">
                                            {{
                                                dayjs(
                                                    ele.createTime.toString()
                                                ).format('YYYY-MM-DD HH:mm:ss')
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 0 && ele.status === 0
                                " v-for="(ele, i) in messagelist" :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">关闭服务通知</div>
                                <div class="msginfo">
                                    <div class="cdmsg">
                                        你跟进的客户
                                        <span class="bord">{{
                                            ele.companyName
                                            }}</span>
                                        关闭了
                                        <span v-show="ele.amtProduct === 0" class="bord">「子弹发薪」</span>
                                        <span v-show="ele.amtProduct === 1" class="bord">「电子签」</span>
                                        <span v-show="ele.amtProduct === 2" class="bord">「日日保」</span>
                                        <span v-show="ele.amtProduct === 3" class="bord">「长期保」</span>
                                        <span v-show="ele.amtProduct === 4" class="bord">「微聘」</span>
                                        <span v-show="ele.amtProduct === 5" class="bord">「微保」</span>
                                        <span v-show="ele.amtProduct === 6" class="bord">「团意日保」</span>
                                        <span v-show="ele.amtProduct === 7" class="bord">「短信群发」</span>
                                        服务；
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作人：</div>
                                        <div class="lablecontent">
                                            {{
                                                ele.createUserName
                                                    ? ele.createUserName
                                                    : '--'
                                            }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作时间：</div>
                                        <div class="lablecontent">
                                            {{
                                                dayjs(
                                                    ele.createTime.toString()
                                                ).format('YYYY-MM-DD HH:mm:ss')
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 2" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">续费通知</div>
                                <div class="msginfo">
                                    <div class="cdmsg">
                                        你跟进的客户
                                        <span class="bord">{{
                                            ele.companyName
                                            }}</span>
                                        续费了
                                        <span v-show="ele.amtProduct === 0" class="bord">「子弹发薪」</span>
                                        <span v-show="ele.amtProduct === 1" class="bord">「电子签」</span>
                                        <span v-show="ele.amtProduct === 2" class="bord">「日日保」</span>
                                        <span v-show="ele.amtProduct === 3" class="bord">「长期保」</span>
                                        <span v-show="ele.amtProduct === 4" class="bord">「微聘」</span>
                                        <span v-show="ele.amtProduct === 5" class="bord">「微保」</span>
                                        <span v-show="ele.amtProduct === 6" class="bord">「团意日保」</span>
                                        <span v-show="ele.amtProduct === 7" class="bord">「短信群发」</span>
                                        服务；
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作人：</div>
                                        <div class="lablecontent">
                                            {{
                                                ele.createUserName
                                                    ? ele.createUserName
                                                    : '--'
                                            }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作时间：</div>
                                        <div class="lablecontent">
                                            {{
                                                dayjs(
                                                    ele.createTime.toString()
                                                ).format('YYYY-MM-DD HH:mm:ss')
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 1" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">客户付款通知</div>
                                <div class="fkbox">
                                    <div class="fkjetext">付款金额</div>
                                    <div class="fkjenum">¥{{ ele.amount }}</div>
                                </div>
                                <div class="msginfo">
                                    <div class="lablebox">
                                        <div class="lable">付款客户：</div>
                                        <div class="lablecontent">
                                            {{ ele.companyName }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">付款方式：</div>
                                        <div class="lablecontent">
                                            {{ ele.msgContent }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">收款账户：</div>
                                        <div class="lablecontent">
                                            {{ ele.bankName }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">收款汇总：</div>
                                        <div class="lablecontent">
                                            当日收款{{
                                                ele.totalCnt
                                            }}笔，共<span class="lightyellow">{{
                                                ele.totalAmt
                                                }}</span>元
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 3" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">离职交接通知</div>
                                <div class="msginfo">
                                    <div class="cdmsg">
                                        已将
                                        <span class="bord">韩翠花</span>
                                        的所有数据交接给<span class="bord">肖战</span>
                                        ，生效时间为
                                        <span class="bord">2022年08月16日</span>
                                        ；
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作人：</div>
                                        <div class="lablecontent">
                                            {{
                                                ele.createUserName
                                                    ? ele.createUserName
                                                    : '--'
                                            }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">操作时间：</div>
                                        <div class="lablecontent">
                                            {{
                                                dayjs(
                                                    ele.createTime.toString()
                                                ).format('YYYY-MM-DD HH:mm:ss')
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 4" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">
                                    <span>日日保报案</span><span class="dark" @click="
                                        tomessagedetail(ele.businessType)
                                        ">查看详情<img class="moreimg" src="../../assets/image/andmore.png"
                                            alt="" /></span>
                                </div>
                                <div class="msginfo" v-if="ele.businessMsg">
                                    <div class="cdmsg">
                                        {{
                                            ele.businessMsg[0] === 'null'
                                                ? '--'
                                                : ele.businessMsg[0]
                                        }}
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">派遣单位：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[1] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险人：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[2] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险时间：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[3] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 5" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">
                                    <span>长期保报案</span><span class="dark" @click="
                                        tomessagedetail(ele.businessType)
                                        ">查看详情<img class="moreimg" src="../../assets/image/andmore.png"
                                            alt="" /></span>
                                </div>
                                <div class="msginfo" v-if="ele.businessMsg">
                                    <div class="cdmsg">
                                        {{
                                            ele.businessMsg[0] === 'null'
                                                ? '--'
                                                : ele.businessMsg[0]
                                        }}
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">派遣单位：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[1] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险人：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[2] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险时间：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[3] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 6" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">
                                    <span>日保上传材料</span><span class="dark" @click="
                                        tomessagedetail(ele.businessType)
                                        ">查看详情<img class="moreimg" src="../../assets/image/andmore.png"
                                            alt="" /></span>
                                </div>
                                <div class="msginfo" v-if="ele.businessMsg">
                                    <div class="cdmsg">
                                        {{
                                            ele.businessMsg[0] === 'null'
                                                ? '--'
                                                : ele.businessMsg[0]
                                        }}
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险人：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[1] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险时间：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[2] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 7" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">
                                    <span>长期保上传材料</span><span class="dark" @click="
                                        tomessagedetail(ele.businessType)
                                        ">查看详情<img class="moreimg" src="../../assets/image/andmore.png"
                                            alt="" /></span>
                                </div>
                                <div class="msginfo" v-if="ele.businessMsg">
                                    <div class="cdmsg">
                                        {{
                                            ele.businessMsg[0] === 'null'
                                                ? '--'
                                                : ele.businessMsg[0]
                                        }}
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险人：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[1] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">出险时间：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[2] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 8" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">
                                    <span>日保派遣单位审核</span><span class="dark" @click="
                                        tomessagedetail(ele.businessType)
                                        ">查看详情<img class="moreimg" src="../../assets/image/andmore.png"
                                            alt="" /></span>
                                </div>
                                <div class="msginfo" v-if="ele.businessMsg">
                                    <div class="cdmsg">
                                        {{
                                            ele.businessMsg[0] === 'null'
                                                ? '--'
                                                : ele.businessMsg[0]
                                        }}
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">派遣单位：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[1] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">审核状态：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[2] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">保险类型：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[3] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tcboxitem" v-show="ele.businessType === 9" v-for="(ele, i) in messagelist"
                                :key="i">
                                <div class="time">
                                    {{
                                        dayjs(ele.createTime.toString()).format(
                                            'YYYY年MM月DD日 HH:mm:ss'
                                        )
                                    }}
                                </div>
                                <div class="top">
                                    <span>长期保派遣单位审核</span><span class="dark" @click="
                                        tomessagedetail(ele.businessType)
                                        ">查看详情<img class="moreimg" src="../../assets/image/andmore.png"
                                            alt="" /></span>
                                </div>
                                <div class="msginfo" v-if="ele.businessMsg">
                                    <div class="cdmsg">
                                        {{
                                            ele.businessMsg[0] === 'null'
                                                ? '--'
                                                : ele.businessMsg[0]
                                        }}
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">派遣单位：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[1] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">审核状态：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[2] }}
                                        </div>
                                    </div>
                                    <div class="lablebox">
                                        <div class="lable">保险类型：</div>
                                        <div class="lablecontent">
                                            {{ ele.businessMsg[3] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 30, 50]"
                                layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="outerVisible" title="撤销保单" :width="isMobile ? '580' : '30%'" :close-on-click-modal="false">
            <template #default>
                <div>
                    <span>客户名称</span>
                    <el-input v-model="cxbdkhmc" placeholder="请输入客户名称" style="width: 60%; margin-left: 10px"></el-input>
                </div>
                <el-dialog :close-on-click-modal="false" v-model="innerVisible" :width="isMobile ? '1150' : '60%'"
                    title="保单可撤销列表" append-to-body>
                    <template #header="{ close, titleId, titleClass }">
                        <div class="my-header">
                            <div>保单可撤销列表</div>
                            <div class="blue cxjl" @click="opencxjllist">
                                撤销记录
                            </div>
                        </div>
                    </template>
                    <template #default>
                        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                            v-model:page-info="pageInfo" @pageChange="handlePageChange">
                            <template #total>
                                <el-table-column label="人数">
                                    <template #default="scope">
                                        <el-popover :ref="(el) => setRefs(el, scope.row)
                                            " trigger="hover" placement="right" width="326" :popper-options="{
                                                boundariesElement: 'viewport'
                                            }" @before-enter="
                                                beforeenter(scope.row)
                                                ">
                                            <template #reference>
                                                <div class="blue pointer">
                                                    {{ scope.row.total }}
                                                </div>
                                            </template>

                                            <el-table :header-cell-style="{
                                                background: '#FAFAFC',
                                                color: '#202536'
                                            }" :data="tcdate" width="100%" max-height="300">
                                                <el-table-column width="100" property="userName" label="姓名" />
                                                <el-table-column width="200" property="idCardNo" label="身份证号" />
                                            </el-table>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #operate>
                                <el-table-column label="操作" fixed="right">
                                    <template #default="scope">
                                        <div class="blue pointer" @click="toinnerdetail(scope.row)">
                                            撤销
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                        </tableComponent>
                        <el-dialog :close-on-click-modal="false" v-model="cxjllisttc" :width="isMobile ? '1150' : '60%'"
                            title="保单撤销记录" append-to-body>
                            <filterComponent hideHead v-model:filter-data="filterDatacxls"
                                @doSearch="handleSearchcxls" />
                            <tableComponent class="set-height" :table-header="tableHeadercxls"
                                :table-data="tableDatacxls" v-model:page-info="cxlspageInfo"
                                @pageChange="handlePageChangecxls">
                                <template #operate>
                                    <el-table-column fixed="right" label="操作" width="120">
                                        <template #default="scope">
                                            <el-button link size="small" class="blue"
                                                @click="tocxlsxq(scope.row)">详情</el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                            </tableComponent>
                            <el-dialog :close-on-click-modal="false" v-model="cxjllisttcdetail"
                                :width="isMobile ? '1150' : '60%'" title="已撤销保单详情" append-to-body>
                                <div class="cxbdxqtopmsg">
                                    <div class="item">
                                        <div class="label">撤销人数：</div>
                                        <div class="labelcontent">
                                            {{ pageInfodtl.total }}人
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="label">撤销时间：</div>
                                        <div class="labelcontent">
                                            {{ cxdetailtime }}
                                        </div>
                                    </div>
                                </div>
                                <tableComponent class="set-height" :table-header="tableHeader1"
                                    :table-data="tableDatacxdtl" v-model:page-info="pageInfodtl"
                                    @pageChange="handlePageChangecxdtl">
                                </tableComponent>
                            </el-dialog>
                        </el-dialog>
                        <el-dialog :close-on-click-modal="false" v-model="innerVisible3"
                            :width="isMobile ? '1150' : '60%'" title="可撤销保单详情" append-to-body>
                            <div class="cxbdxqtopmsg">
                                <div class="item">
                                    <div class="label">
                                        当前1-4类方案最低人数：
                                    </div>
                                    <div class="labelcontent">
                                        <span v-if="
                                            plan.type == 3 &&
                                            plan.ensurelimit != null &&
                                            plan.ensurelimit > 0
                                        ">{{ plan.ensurelimit }}</span>
                                        <span v-else>{{
                                            plan.ensureLimitFour
                                            }}</span>
                                        人
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="label">
                                        当前方案投保人数：{{
                                            ensureByPlanCodelength
                                        }}
                                    </div>
                                    <div class="labelcontent">人</div>
                                </div>
                                <div class="item">
                                    <div class="label">
                                        撤销人数：{{ pageInfo1.total }}
                                    </div>
                                    <div class="labelcontent">人</div>
                                </div>
                                <div class="item" v-if="cxinfo.operationType !== 1">
                                    <div class="label">
                                        撤销后当前方案投保人数：{{
                                            ensureByPlanCodelength -
                                            pageInfo1.total
                                        }}
                                    </div>
                                    <div class="labelcontent">人</div>
                                </div>
                                <el-button type="primary" @click="bxcxfn">撤销</el-button>
                            </div>
                            <tableComponent class="set-height" :table-header="tableHeader1" :table-data="tableData1"
                                v-model:page-info="pageInfo1" @pageChange="handlePageChange1">
                            </tableComponent>
                        </el-dialog>
                    </template>
                </el-dialog>
            </template>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="cxbdsearch">
                        搜索
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <insurerenewalDialog v-model:show="showYjxb"></insurerenewalDialog>
        <failedPayrollSearch v-model:show="showlxsbcx"></failedPayrollSearch>
        <employeeCancellation v-model:show="showygzx"></employeeCancellation>
        <resetCaptcha v-model:show="showResetCaptcha"></resetCaptcha>
    </div>
</template>
BaoSiQianYi

<script setup lang="ts">
import { getmessagelistapi, getuserinfoapi } from '../../api/api'
import { onMounted, ref, nextTick } from 'vue'
import dayjs from 'dayjs'
import tableComponent from '@/components/tableComponent/index.vue'
import insurerenewalDialog from '@/views/insurerenewalDialog/insurerenewalDialog.vue'
import failedPayrollSearch from '@/views/failedPayrollSearch/failedPayrollSearch.vue'
import employeeCancellation from '@/views/employeeCancellation/employeeCancellation.vue'
import resetCaptcha from '@/views/resetCaptcha/resetCaptcha.vue'
import { ElMessage } from 'element-plus'
import {
    getqueryRevokeensurelistapi,
    getInsurComCompanyPlansapi,
    revokeensureapi,
    getdetailrecordIdapi,
    getqueryinsurlistapi,
    getqueryalreadyrevokeensureListapi
} from '@/api/operationHomepage.ts'
import { useRouter } from 'vue-router'
import { getwaithandlejobapi } from '../../api/operationHomepage'
import CountUp from 'vue-countup-v3'
const isMobile = ref((window as any).isMobile)

const poprefs = ref({}) as any
const setRefs = (el: any, row: any) => {
    poprefs[row.id] = el
}

const beforeenter = (val: any) => {
    tcdate.value = []
    getdetailrecordIdapi(
        {
            id: val.id,
            companyPlanId: val.companyPlanId,
            pageSize: 999999,
            pageNum: 1
        },
        { noLoading: true }
    ).then((res: any) => {
        tcdate.value = res.rows
        nextTick(() => {
            poprefs[val.id].popperRef.popperInstanceRef.update()
        })
    })
}
const tcdate = ref<any>([])

const handleSearchcxls = () => {
    getqueryalreadyrevokeensureList(
        filterDatacxls.value.list.companyName.value
    )
}
const tocxlsxq = (val: any) => {
    pageInfodtl.value.pageNum = 1
    cxdetailtime.value = val.createTime
    dtlinfo.value.id = val.id
    dtlinfo.value.companyPlanId = val.companyPlanId
    getdetiallist()
    cxjllisttcdetail.value = true
    console.log(val, 'sdhjfghuyshgiuyduyghiud')
}
const handlePageChangecxdtl = () => {
    getdetiallist()
}
const getdetiallist = () => {
    getdetailrecordIdapi({
        id: dtlinfo.value.id,
        companyPlanId: dtlinfo.value.companyPlanId,
        pageSize: pageInfodtl.value.pageSize,
        pageNum: pageInfodtl.value.pageNum
    }).then((res: any) => {
        console.log(res, '2222222222')
        tableDatacxdtl.value = res.rows
        pageInfodtl.value.total = res.total
    })
}
const tableDatacxdtl = ref<any>([])
const cxdetailtime = ref('')
const cxjllisttcdetail = ref(false)
const pageInfodtl = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const dtlinfo = ref({
    id: '',
    companyPlanId: ''
})
const handlePageChangecxls = () => {
    getqueryalreadyrevokeensureList(
        filterDatacxls.value.list.companyName.value
    )
}
const tableHeadercxls = ref([
    {
        label: '公司名称',
        prop: 'companyName',
        width: 200
    },
    {
        label: '操作类型',
        prop: 'msg'
    },
    {
        label: '人数',
        prop: 'total'
    },
    {
        label: '方案名称',
        prop: 'companyPlanName',
        width: 200
    },
    {
        label: '方案类型',
        prop: 'type',
        width: 100,
        map: {
            1: '微保',
            2: '日日保',
            3: '雇主险',
            4: '月保单',
            5: '即时生效'
        }
    },
    {
        label: '生效时间',
        prop: 'insurStartDate'
    },
    {
        label: '录入时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '录入人',
        prop: 'managerName'
    },
    {
        label: '状态',
        prop: 'operationType',
        map: {
            2: '已撤销'
        }
    },
    {
        label: '撤销时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '操作',
        prop: 'operate'
    }
])
const cxjllisttc = ref(false)
const opencxjllist = () => {
    cxjllisttc.value = true
    getqueryalreadyrevokeensureList(cxbdkhmc.value)
    filterDatacxls.value.list.companyName.value = cxbdkhmc.value
}
const getqueryalreadyrevokeensureList = (val: any) => {
    getqueryalreadyrevokeensureListapi({
        pageSize: cxlspageInfo.value.pageSize,
        pageNum: cxlspageInfo.value.pageNum,
        companyName: val
    }).then((res: any) => {
        console.log(res, 'fghjksdghukdghikudijuhdfij')
        tableDatacxls.value = res.rows
        cxlspageInfo.value.total = res.total
    })
}
const tableDatacxls = ref<any>([])
const cxlspageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const filterDatacxls = ref({
    list: {
        companyName: {
            name: '公司',
            prop: 'companyName',
            value: '',
            placeholder: '请输入公司名称',
            type: 'input',
            inputType: 'text'
        }
    }
})
const getwaithandlejob = () => {
    getwaithandlejobapi().then((res: any) => {
        console.log(res, 'waitwaitwaitwaitwaitwaitwaitwait')
        waitmsg.value = res
    })
}

const selectmessagetype = ref('')
const messagetypeoptions = ref<any>([
    { label: '全部', value: '' },
    { label: '案件资料上传', value: '1' },
    { label: '充值审核', value: '2' },
    { label: '派遣单位审批', value: '3' }
])

const waitmsg = ref<any>({})
const router = useRouter()
const showygzx = ref(false)
const showlxsbcx = ref(false)
const showResetCaptcha = ref(false)

const tomessagedetail = (i: any) => {
    console.log(i)
    if (i === 4 || i === 5) {
        tobacl()
    } else if (i === 7 || i === 6) {
        tobacl()
    } else if (i === 8 || i === 9) {
        topqdwsp()
    }
}
const totbrycx = () => {
    router.push({ path: '/PolicyholderEnquiries' })
}
const tohmd = () => {
    router.push({ path: '/blacklist' })
}
const tobsqy = () => {
    router.push({ path: '/BaoSiQianYi' })
}
const tobmd = () => {
    router.push({ path: '/whitelist' })
}
const toygzx = () => {
    router.push({ path: '/employeeCancellation' })
}
const topqdwsp = () => {
    router.push({ path: '/approval', query: { current: 0 } })
}
const toczsp = () => {
    router.push({ path: '/approval', query: { current: 1 } })
}
const tobacl = () => {
    router.push({ path: '/reportClaimAdjuster' })
}
const toyebztx = () => {
    router.push({ path: '/Longterminsurance' })
}
const tolzcykhfp = () => {
    router.push({ path: '/AssigningCustomers' })
}
onMounted(() => {
    date.value = dayjs().format('YYYY-MM-DD')
    getuserinfo()
    getmessagelist()
    getwaithandlejob()
})
const cxbd = () => {
    outerVisible.value = true
    cxbdkhmc.value = ''
}
const outerVisible = ref(false)
const innerVisible = ref(false)
const innerVisible3 = ref(false)

const plan = ref<any>({})
const bxcxfn = () => {
    console.log('保险撤销')
    revokeensureapi({
        id: cxinfo.value.id,
        companyId: cxinfo.value.companyId,
        operationType: cxinfo.value.operationType,
        companyPlanId: cxinfo.value.companyPlanId,
        type: plan.value.type,
        insurStartDate: cxinfo.value.insurStartDate,
        createUserId: cxinfo.value.createUserId
    }).then((res: any) => {
        console.log(res, '撤销')
        if (res.code === 200) {
            innerVisible3.value = false
            // innerVisible.value = false;
            // outerVisible.value = false;
            getqueryRevokeensurelist()
            ElMessage({
                type: 'success',
                message: res.msg
            })
        }
    })
}
const toinnerdetail = (val: any) => {
    console.log(val)
    pageInfo1.value.pageNum = 1
    pageInfo1.value.pageSize = 10
    pageInfo1.value.total = 0
    getInsurComCompanyPlansapi({ id: val.companyPlanId }).then((res: any) => {
        plan.value = res
    })
    cxinfo.value.createUserId = val.createUserId
    cxinfo.value.id = val.id
    cxinfo.value.insurStartDate = val.insurStartDate
    cxinfo.value.companyPlanId = val.companyPlanId
    cxinfo.value.operationType = val.operationType
    cxinfo.value.companyId = val.companyId
    getdetailrecordIdapi({
        id: val.id,
        companyPlanId: val.companyPlanId,
        pageSize: pageInfo1.value.pageSize,
        pageNum: pageInfo1.value.pageNum
    }).then((res: any) => {
        console.log(res, '2222222222')
        tableData1.value = res.rows
        pageInfo1.value.total = res.total
    })

    getqueryinsurlistapi({
        companyId: val.companyId,
        insurCompany: val.insurCompany,
        insurCompanyPlanCode: val.insurCompanyPlanCode
    }).then((res: any) => {
        console.log(res, '3333333333')
        ensureByPlanCodelength.value = res.ensureByPlanCode.length
    })

    innerVisible3.value = true
}
const ensureByPlanCodelength = ref(0)
const cxinfo = ref<any>({
    id: '',
    companyPlanId: '',
    companyId: '',
    operationType: '',
    insurStartDate: ''
})
const getdetailrecordId = () => {
    getdetailrecordIdapi({
        id: cxinfo.value.id,
        companyPlanId: cxinfo.value.companyPlanId,
        pageSize: pageInfo1.value.pageSize,
        pageNum: pageInfo1.value.pageNum
    }).then((res: any) => {
        console.log(res, '2222222222')
        tableData1.value = res.rows
        pageInfo1.value.total = res.total
    })
}
const cxbdkhmc = ref('')
const tableHeader1 = ref([
    {
        label: '姓名',
        prop: 'userName'
    },
    {
        label: '身份证号',
        prop: 'idCardNo',
        width: 200
    },
    {
        label: '派遣单位',
        prop: 'serveCompanyName',
        width: 200
    },
    {
        label: '方案名称',
        prop: 'companyPlanName',
        width: 200
    },
    {
        label: '生效时间',
        prop: 'insurStartTime',
        width: 200
    },
    {
        label: '到期时间',
        prop: 'insurEndTime',
        width: 200
    },
    {
        label: '录入时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '风险等级',
        prop: 'occupationLevel'
    }
])
const tableHeader = ref([
    {
        label: '公司名称',
        prop: 'companyName',
        width: 250,
        fixed: 'left'
    },
    {
        label: '操作类型',
        prop: 'operationType',
        width: 100,
        map: {
            0: '加保',
            1: '减保'
        }
        // colorMap: {
        //   1: 'red'
        // }
    },
    {
        label: '人数',
        prop: 'total',
        width: 100
    },
    {
        label: '方案名称',
        prop: 'companyPlanName',
        width: 150
    },
    {
        label: '方案类型',
        prop: 'type',
        width: 100,
        map: {
            1: '微保',
            2: '日日保',
            3: '雇主险',
            4: '月保单',
            5: '即时生效'
        }
    },
    {
        label: '生效时间',
        prop: 'insurStartDate',
        width: 110
    },
    {
        label: '录入时间',
        prop: 'createTime',
        width: 110
    },
    {
        label: '录入人',
        prop: 'managerName',
        width: 100
    },
    {
        label: '状态',
        prop: 'isSuccess',
        width: 100,
        map: {
            0: '失败',
            1: '成功'
        }
    },
    {
        label: '操作',
        prop: 'operate',
        width: 130
    }
])
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const pageInfo1 = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const cxbdsearch = () => {
    pageInfo.value.pageNum = 1
    pageInfo.value.pageSize = 10
    pageInfo.value.total = 0
    if (cxbdkhmc.value === '') {
        ElMessage({
            type: 'warning',
            message: '请输入客户名称'
        })
        return
    }
    innerVisible.value = true
    getqueryRevokeensurelist()
}
const handlePageChange = () => {
    getqueryRevokeensurelist()
}
const handlePageChange1 = () => {
    getdetailrecordId()
}
const getqueryRevokeensurelist = () => {
    getqueryRevokeensurelistapi({
        companyName: cxbdkhmc.value,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum
    }).then((res: any) => {
        console.log(res, '撤销公司列表')
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}
const tableData = ref<any>([])
const tableData1 = ref<any>([])

const yjxb = () => {
    console.log('一键续保')
    showYjxb.value = true
}

const showYjxb = ref(false)
const handleSizeChange = (val: any) => {
    console.log(val)
    pageSize.value = val
    currentPage.value = 1
    getmessagelist()
}
const handleCurrentChange = (val: any) => {
    console.log(val)
    currentPage.value = val
    getmessagelist()
}
const getmessagelist = () => {
    getmessagelistapi({
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        queryBusinessType: selectmessagetype.value
    }).then((res: any) => {
        console.log(res, '消息列表')
        messagelist.value = res.rows
        messagelist.value.forEach((ele: any, i: any) => {
            if (ele.businessMsg && ele.businessMsg !== null) {
                ele.businessMsg = ele.businessMsg.split(';')
            }
        })
        console.log(messagelist.value, 'yuerhuygehygrhiouh')
        total.value = res.total
    })
}
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const messagelist = ref<any>([])
const date = ref('')
const getuserinfo = () => {
    getuserinfoapi().then((res: any) => {
        console.log(res, '个人信息')
        myname.value = res.user.nickName
        myimg.value = res.user.avatar
        myphone.value = res.user.phonenumber
        myisadmin.value = res.user.isCrmPcAdmin
        myrolename.value = res.user.roles[0].roleName
    })
}
const myimg = ref('')
const myrolename = ref('')
const myname = ref('')
const myphone = ref('')
const myisadmin = ref(0)
</script>

<style scoped lang="scss">
.utilbox {
    width: 100%;
    box-sizing: border-box;

    .bgbox {
        width: 100%;
        box-sizing: border-box;
        background-image: url('./img/bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 30px;

        .utilinfobox {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .itemboxc {
                width: 14%;
                height: 176px;
            }

            .itembox {
                width: 14%;
                background-color: #ffffff;
                height: 176px;
                box-sizing: border-box;
                font-size: 10px;
                border-radius: 8px;
                box-shadow: 0px 2px 16px 0px #e3ebf3;
                padding: 36px 30px 30px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .iconimg {
                    width: 64px;
                    height: 64px;
                }

                .text {
                    white-space: nowrap;
                    color: #202536;
                    font-size: 14px;
                }
            }
        }
    }

    .title {
        padding-left: 20px;
        font-size: 16px;
        color: #3d3d3d;
        font-weight: 700;
        margin-bottom: 10px;
    }
}

.dclbox {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px 16px 16px 16px;

    .infobox {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item:hover {
            background-color: #eef6ff;

            .top {
                color: #3e5ff5;
            }
        }

        .item {
            width: 15%;
            height: 58px;
            background-color: #ffffff;
            border-radius: 4px;
            padding: 6px 60px 6px 4px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 24px;
                font-weight: 700;
                color: #202536;
                margin-bottom: 8px;
            }

            .bottom {
                color: #9497b1;
                font-size: 14px;
                white-space: nowrap;
            }
        }
    }

    .title {
        font-size: 16px;
        color: #202536;
        font-weight: 700;
        margin-bottom: 24px;
    }
}

.tcbox {
    // border-top: 1px solid #f4f4f7;
    padding-top: 100px;
    height: calc(80vh - 100px);
    overflow: auto;

    .tcboxitem {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #f4f4f7;
        border-radius: 8px;
        margin-bottom: 50px;
        position: relative;

        .fkbox {
            margin-top: 16px;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .fkjetext {
                color: #9497b1;
                font-size: 14px;
            }

            .fkjenum {
                color: #ff7642;
                font-size: 26px;
                font-weight: 700;
            }
        }

        .msginfo {
            padding: 16px;
            box-sizing: border-box;
            width: 100%;

            .lablebox {
                font-size: 14px;
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .lable {
                    color: #9497b1;
                    width: 80px;
                }

                .lablecontent {
                    color: #202536;
                }
            }

            .cdmsg {
                font-size: 14px;
                color: #565868;
                margin-bottom: 16px;

                .bord {
                    font-weight: 700;
                    color: #202536;
                }
            }
        }

        .top {
            font-size: 14px;
            color: #3e5ff5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 20px;
            width: 100%;
            box-sizing: border-box;
            padding-left: 18px;
            background-color: #e6eeff;
            height: 42px;
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;

            .moreimg {
                margin-left: 5px;
            }
        }

        .time {
            position: absolute;
            left: 0;
            top: -50px;
            width: 100%;
            box-sizing: border-box;
            color: #9497b1;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }
    }
}

.sssj {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 20px;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .top_l {
            .bord {
                color: #3d3d3d;
                font-size: 16px;
                font-weight: 700;
                margin-right: 12px;
            }

            .gray {
                font-size: 12px;
                color: #9497b1;
            }
        }

        .top_r {
            width: 157px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid #d1d7f3;
            border-radius: 4px;
            cursor: pointer;

            .topritem {
                height: 26px;
                line-height: 26px;
                flex: 1;
                text-align: center;
                font-size: 12px;
                color: #9eaffa;
            }
        }
    }
}

.topmsg {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 13px 16px;
    height: 70px;

    img {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        margin-right: 12px;
    }

    .msgtop {
        font-size: 16px;
        color: #3d3d3d;
        font-weight: 700;
    }

    .msgdetail {
        margin-top: 8px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #9497b1;

        .line {
            width: 2px;
            height: 12px;
            margin: 0 8px;
            background-color: #9497b1;
        }
    }
}

.box {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;
    gap: 20px;

    .boxl {
        min-width: 65%;
        flex-shrink: 0;
    }

    .boxr {
        min-width: 34%;
        flex-shrink: 0;
    }
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.messagebox {
    position: relative;
    width: 100%;
    height: 80vh;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px;
    padding-bottom: 100px;

    .footer {
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        bottom: -20px;
        left: 0;
        height: 50px;
        background-color: #ffffff;
    }
}

.pointer {
    cursor: pointer;
}

.blue {
    color: #3e5ff5;
}

.cxbdxqtopmsg {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
}

.messageselect {
    // :deep(.el-input__wrapper) {
    //     border: none !important;
    //     box-shadow: none !important;
    // }
    // :deep(.el-select--large:hover) {
    //     box-shadow: none !important;
    //     border: none !important;
    // }
    // :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    //     box-shadow: none !important;
    //     border: none !important;
    // }
}

.dark {
    color: #9497b1 !important;
}

.my-header {
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cxjl {
    cursor: pointer;
    font-size: 16px;
}
</style>
